<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script src="js/jquery.js"></script>
    <style>
        .success{
            font-family: 华文行楷;
            font-size: 15px;
            font-weight: 600;
            color: greenyellow;
        }

        .error{
            font-family: 华文行楷;
            font-size: 15px;
            font-weight: 600;
            color: red;
        }
    </style>
    <script>
        $(() => {
            $("#username").keyup(userCheck);
            $("#password").keyup(pwdCheck);

        });
        //表单验证
        function checkInvalue(){
            let newVar = userCheck()&&pwdCheck();
            return newVar;
        }

        function userCheck() {
            //用户名验证
            //获取username对象
            //获取文本框中的值并去两端空格
            let val = $("#username").val().trim();
            //按键抬起时，先移除所有样式
            $("#usererror").removeClass();
            if (val == "") {
                $("#usererror").addClass("error").text("用户名不能为空");
                //用户名为空时清除密码提示文本
                $("#pwderror").removeClass().text("");
                return false;
            } else if (!/^[A-Za-z0-9]+$/.test(val)) {
                $("#usererror").addClass("error").text("用户名不合法");
                return false;
            } else {
                $("#usererror").addClass("success").text("用户名合法");
                //用户名正确后校验密码
                pwdCheck();
                return true;
            }
            return false;
        }

        //密码验证
        function pwdCheck() {
            //获取文本框中的值并去两端空格
            let val = $("#password").val().trim();
            //按键抬起时，先移除所有样式
            $("#pwderror").removeClass().text("");
            if (val == "") {
                $("#pwderror").addClass("error").text("密码不能为空");
                return false;
            } else if (!val.match(/^[a-zA-Z]\w{5,17}$/)) {
                $("#pwderror").addClass("error").text("密码不合法");
                return false;
            } else {
                $("#pwderror").addClass("success").text("密码可用");
                return true;
            }
            return false;
        }




    </script>
</head>
<body>

<form action="http://www.baidu.com" onsubmit=" return checkInvalue()">
    <input type="text" id="username" name="username" placeholder="请输入用户名">
    <span id="usererror"></span>
    <br>
    <input type="password" id="password" name="password" placeholder="请输入密码">
    <span id="pwderror"></span>
    <br>
    <input type="submit" value="注册">
    <input type="reset" value="重置">
</form>

</body>

</html>